<script setup>

</script>

<template>
    <div class="welcome">
        <div class="welcome-left" style="width: 600px;height: 100%">
            <el-image style="width: 100%;height: 100%" fit="cover"
                      src="https://pica.zhimg.com/v2-905513990381422285bd36ce1cbdc4f1_r.jpg?source=2c26e567"/>
            <div class="welcome-title">
                <div style="font-size: 26px;font-weight: bold">欢迎来到个人博客
                </div>
                <div style="margin-top: 16px;font-size: 13px">
                    在这里你可以学习最新Java知识，分享日常生活，与其他同好交流学习
                </div>
            </div>
        </div>
        <div style="width: 400px;height: 100%">
            <router-view v-slot="{ Component }">
                <transition name="el-fade-in-linear" mode="out-in">
                    <component :is="Component" style="height: 100%"/>
                </transition>
            </router-view>
        </div>
    </div>
    <div class="footer">@2024 版权所有 yz820.com</div>
</template>

<style scoped>

.welcome {
    width: 1000px;
    height: 550px;
    margin: 80px auto auto;
    display: flex;
    flex-direction: row;
    box-shadow: var(--el-box-shadow-dark);
}

.welcome-title {
    position: relative;
    bottom: 100px;
    left: 30px;
    color: white;
    text-shadow: 0 0 10px black;
}

.footer {
    margin-top: 40px;
    text-align: center;
    cursor: pointer;
}

.footer:hover {
    color: #776b3d;
}
</style>